<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
import httpApi from "@/http";
export default {
  data() {
    return {
      isNavigating: false // 标记是否为主动跳转（非关闭）
    };
  },
  mounted() {
    // 监听页面卸载前事件（关闭/刷新/跳转时触发）
    window.addEventListener('beforeunload', this.handleBeforeUnload);
    // 监听页面卸载完成事件（关闭后触发）
    window.addEventListener('unload', this.handleUnload);
    // 监听 Vue Router 导航（如果项目使用了 Vue Router）
    if (this.$router) {
      this.$router.beforeEach((to, from, next) => {
        this.isNavigating = true; // 标记为主动跳转
        next();
      });
    }
  },
  beforeDestroy() {
    // 移除事件监听（避免内存泄漏）
    window.removeEventListener('beforeunload', this.handleBeforeUnload);
    window.removeEventListener('unload', this.handleUnload);
  },
  methods: {
    handleBeforeUnload(e) {
      // 阻止默认行为（部分浏览器会弹出确认框）
      e.preventDefault();
      e.returnValue = ''; // 兼容部分浏览器需要显式设置

      // 判断是否为关闭操作（排除主动跳转场景）
      if (!this.isNavigating) {
        console.log('检测到可能关闭浏览器/窗口');
        // 发送关闭日志（使用 sendBeacon 确保请求不被取消）
      if(localStorage.getItem('token')){
        httpApi.loginApi.refreshToken({}).then(res1 => {
          localStorage.removeItem('token')
        })
      }
        navigator.sendBeacon('/api/close-log', JSON.stringify({ action: 'close' }));
      }
    },
    handleUnload() {
      // 页面已卸载（可执行最终清理操作，如取消未完成的请求）
      console.log('浏览器/窗口已关闭');
      if(localStorage.getItem('token')){
        httpApi.loginApi.refreshToken({}).then(res1 => {
          localStorage.removeItem('token')
        })
      }
     
    }
  }
};
</script>
<style lang="scss">
@import url("@/common/reset.css"); //样式重置

input {
  font-size: 12px !important;
}

.cell {
  font-size: 12px !important;
}
</style>
